<template>
  <div>
    <el-container>
      <el-header>
        <span class="title">校园二手交易市场</span>
        <el-tooltip content="首页">
          <img class="avatar home" src="../assets/home.png" @click="home">
        </el-tooltip>
        <el-tooltip content="购物车">
          <img class="avatar tcar" src="../assets/car.png" @click="checkOut">
        </el-tooltip>
        <el-tooltip content="我的店铺">
          <img class="avatar shop" src="../assets/shop.png" @click="business">
        </el-tooltip>
        <el-tooltip content="我的信息">
          <img class="avatar user" src="../assets/boy.png" @click="userPage">
        </el-tooltip>
        <el-tooltip content="注销">
          <img v-if="token !== null" class="avatar logout" src="../assets/logout.png" @click="logout">
        </el-tooltip>
        <el-tooltip content="登录">
          <img v-if="token === null" class="avatar logout" src="../assets/login.png" @click="login">
        </el-tooltip>
      </el-header>
      <el-main class="main">
          <el-tooltip v-if="isCheckOut" content="去购物车结算">
            <el-badge :value="goods.length" class="mcar">
              <img class="avatar" src="../assets/car.png" @click="checkOut">
            </el-badge>
          </el-tooltip>
        <keep-alive include="productList,ProductDetail">
          <router-view ></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "home",
  data(){
    return {
      goods:[],
      token: sessionStorage.getItem("userInfo")
    }
  },
  computed: {
    isCheckOut(){
      let path = this.$route.path
      const paths = ['/home/checkOut', '/']
      let showCart = true
      paths.forEach(p => {
        if(p === path){
          showCart = false
        }
      })
      return showCart
    }
  },
  methods: {
    home(){
      this.$router.push({
        path: '/home'
      })
    },
    business(){
      if(sessionStorage.getItem("userInfo")){
        this.$router.push({
          path: '/home/myShop'
        })
      }else{
        this.$message.error("请先登录！！！")
      }
    },
    userPage(){
      if(sessionStorage.getItem("userInfo")){
        this.$router.push({
          path: '/home/userInfo'
        })
      }else{
        this.$message.error("请先登录！！！")
      }
    },
    logout(){
      this.$axios.get("/logout", {
        headers: {
          "Authorization": localStorage.getItem('token')
        }
      }).then(res => {
        this.$store.commit("removeInfo")
        this.token = localStorage.getItem("token")
        this.$router.push({
          name: 'Index'
        })
      })
    },
    login(){
      this.$router.push({
        path: '/login'
      })
    },
    checkOut(){
      if(sessionStorage.getItem("userInfo")){
        this.$router.push({
          path: '/home/checkOut'
        })
      }else{
        this.$message.error("请先登录！！！")
      }
    },
    addGoods(val){
      let isExist = false;
      this.goods.forEach(good => {
        if(good.id === val.id){
          isExist = true
        }
      })
      if(!isExist){
        this.addGoodsToCart(val)
      }
    },
    deleteGoods(val){
      this.goods = this.goods.filter(good => {
        return good.id !== val
      })
    },
    addGoodsToCart(val) {
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.post("/cart", {
        userId: userId,
        goodId: val.id,
        num: 1
      }).then(res => {
        this.getCart()
      })
    },
    getCart(){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.get(`/cart/${userId}`)
          .then(res => {
            this.goods = res.data.data.goods
            this.goods.forEach(good => {
              good.picGoods = "data:image/jpeg;base64,"+good.picGoods
            })
          })
    }
  },
  mounted() {
    this.$bus.$on('addProductToCar', (data) => {
      this.addGoods(data)
    })
    this.$bus.$on("deleteCart", () => {
      this.getCart()
    })
  },
  created() {
    this.getCart()
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  width: 1000px;
  color: #333333;
  /*text-align: center;*/
  /*line-height: 160px;*/
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.main{
  margin: 0 auto;
}
.title{
  font-size: 50px;
}
.avatar{
  width: 40px;
  border-radius: 5px;
}
.avatar:hover{
  box-shadow: 0px 0px 2px;
}
.home{
  position: relative;
  left: 220px;
}
.shop{
  position: relative;
  left: 260px;
}
.user{
  position: relative;
  left: 280px;
}
.logout{
  position: relative;
  left: 300px;
}
.tcar{
  position: relative;
  left: 240px;
}
.mcar{
  position: fixed;
  bottom: 200px;
  right: 20px;
}
</style>